<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100%;
        }
        
        #box {
            color: red;
        }
        
        p {
            margin-left: 30%;
            float: left;
        }
        
        #d,
        #h,
        #m,
        #s {
            float: left;
            border: 1px solid gray;
            padding: 14px 5px;
            margin: 1px;
        }
    </style>
    <script>
        window.onload = function() {
            var endTime = new Date('2021-10-1 18:51:00')

            var d = h = m = s = 0
            var dodiv = document.getElementById('d')
            var hodiv = document.getElementById('h')
            var modiv = document.getElementById('m')
            var sodiv = document.getElementById('s')
            var id = setInterval(countDown, 10)

            function countDown() {
                var newTime = new Date()
                var stime = parseInt((endTime.getTime() - newTime.getTime()) / 1000)
                if (stime > 0) {
                    d = parseInt(stime / 86400)
                    h = parseInt((stime / 3600) % 24)
                    m = parseInt((stime / 60) % 60)
                    s = parseInt(stime % 60)
                } else {
                    clearInterval(id)
                }

                dodiv.innerHTML = (d < 10 ? '0' + d : d) + '天'
                hodiv.innerHTML = (h < 10 ? '0' + h : h) + '时'
                modiv.innerHTML = (m < 10 ? '0' + m : m) + '分'
                sodiv.innerHTML = (s < 10 ? '0' + s : s) + '秒'


            }
        }
    </script>
</head>

<body>
    <img src="image/8-1.png">
    <div id="box">
        <p>距离本场秒杀结束还剩：</p>
        <div id="d"></div>
        <div id="h"></div>
        <div id="m"></div>
        <div id="s"></div>
    </div>
</body>

</html>